function compiler(s) {
   
   //console.log(s1)
   let res = s.replace(/#\{/g, '${');
   const reJsScript = /\{\%([^%]+)\%\}/g;
  // 首先直接获取到对应的js语句
  // 然后因为 js 不可以被包含在模板字符串中，因此需要特殊处理，前添加一个 `, 承接上一个 `， 后利用 str+= ` 来承接下面的字符串
    res = res.replace(reJsScript, ($0, $1) => {
      return '`\n' + $1.trim() + ';\nstr+=`';
    });
    res=forLabelExec(res);
    const head = "let str = '';\nwith(obj){\nstr += `";
    const tail = "`\n};\nreturn str;";
    const generatorStr = head + res + tail;
    const generator =  new Function("obj", generatorStr);
    //console.log(generator)
    return obj => generator(obj);
};
function forLabelExec(templateStr) {  
  let result = '';  
  let match;  
  // 使用正则表达式匹配 <for el="..."> ... </for>  
  // 注意：它可以处理属性值使用单引号或双引号，并且允许在属性名和等号、等号和属性值、属性值之后和标签闭合之前存在任意数量的空格
  const regex = /<for\s+el\s*=\s*(['"])(.*?)\1\s*>([\s\S]*?)<\/for>/g; 

  while ((match = regex.exec(templateStr)) !== null) {
    const loope = match[2].trim(); // 获取并修剪 el 属性的值  
    let loopb = match[3].trim(); // 获取并修剪 <for> 和 </for> 之间的内容  
    // 如果 loopb 末尾有换行符，则移除它（可选，取决于您想要的输出格式）  
    if (loopb.endsWith('\n')) {  
      loopb = loopb.slice(0, -1); 
    }  
    //result += `for(${loope}){str += \`${loopb}\\n\`;\n}\n`;  
    result += `\`\nfor(${loope}){str+=\`${loopb.trim()}\`}str+=\``;  
    // 注意：我在模板字符串的末尾添加了 \\n 来表示换行符，并在整个字符串后添加了分号  
    // 如果您不希望每个循环后都有换行符，可以移除 \\n  
}
  return result===''?templateStr:result;
}
const t = `
<for el="var i in [1,2,3]">  
    <div>#{i}</div>  
</for>  
<for el="let j of ['a','b','c']">  
    <p>#{j.toUpperCase()}</p>  
</for>  
`;
//console.log(forLabelExec(t));  

  //const compiler = require('../index');
var it=function(s,x){
    //console.log(s)
    x();
}
var expect=(c)=>{
  console.log(c)
}

it("解析 {{  }}", () => {
  const output = compiler("<h1>#{name}</h1>")({name:"arrow" });
  expect(output);//.toBe(`<h1>arrow</h1>`);
});

it("{{}} toUpperCase 表达式", () => {
  const output = compiler("<h1>#{name.toUpperCase()}</h1>")({ name: "arrow" });
  expect(output);//.toBe(`<h1>ARROW</h1>`);
});

it("{% %} js  语句", () => {
  const output = compiler("{% arr.forEach(item => { %}<div>#{item}\${a}</div>{% }) %}")({ arr: [1, 2],a:'abc' });
  expect(output);//.toBe(`<div>1</div><div>2</div>`);
});

it("for测试", () => {
  const output = compiler(`
    <for el='let i of arr'>
    <div>数据集#{i+22}</div>
    <if el='i>0'><div>数据集#{i+22}</div></if>
</for>
    `)({ arr: [3,4],a:'abc' });
  expect(output);//.toBe(`<div>1</div><div>2</div>`);
});

